<template>
  <div>
    <nav-bar class="category-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control class="tab-control" :titles="titles"></tab-control>
    <div class="wrapper" ref="wrapper">
      <ul class="content">
        <button @click="click()">按钮</button>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
        <li>列表7</li>
        <li>列表8</li>
        <li>列表9</li>
        <li>列表10</li>
        <li>列表11</li>
        <li>列表12</li>
        <li>列表13</li>
        <li>列表14</li>
        <li>列表15</li>
        <li>列表16</li>
        <li>列表17</li>
        <li>列表18</li>
        <li>列表19</li>
        <li>列表20</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  import NavBar from "components/common/navbar/NavBar"
  import TabControl from "components/content/tabControl/TabControl"

  export default {
    data() {
      return {
        scroll: null,
        titles: ["流行", "新款", "精选"],
      }
    },
    components: {
      TabControl,
      NavBar
    },
    mounted() {
      let wrapper = document.querySelector('.wrapper')
      this.scroll = new BScroll(wrapper,{
        probeType:1,
        pullUpLoad:true
      });
      this.scroll.on("scroll",(position) => {
        // console.log(position);
      })
      this.scroll.on("pullingUp",() => {
        console.log("上拉加载");
        // 发送网络请求
        // 等请求数据完成， 并将数据渲染出来后
        this.scroll.finishPullUp();
      })
    },
    methods:{
      click(){
        this.$emit('backClick');
      }
    }
  }
</script>

<style>
  /* .wrapper {
    height: 150px;
    background-color: red;
    overflow: hidden;
  } */

  .category-nav {
    background-color: var(--color-tint);
    color: white;
    /* position: fixed; */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  ,
  .tab-control {
    position: sticky;
    top: 43px;
  }
</style>
